<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>

    <style>
        .arrowImg{
            width: 50px;
            height: 50px;
            Opacity:0.85;
            border-radius: 50px;
        }
    </style>
</head>

<script>
    var total = 0;
    window.onload = function () {
        var keys = document.getElementById("keys");//存放箭头img标签的元素
        var startBut = document.getElementById("but1");//存放箭头img标签的元素
        var time = 3000;//默认的速度
        var isFinish = true;
        var arrowCount = 7;//箭头数量
        var arrows ;// 用来记录箭头的元素
        var msg = document.getElementById("msg");//提示文字
        var miss = document.getElementById('miss');//miss音乐
        var perfect = document.getElementById('perfect');//perfect音乐
        var music = document.getElementById('music');//背景音乐
        var motion = document.getElementById('motion');//表情
        var hr1 = document.getElementById('hr1');//进度条
        var danceGif = document.getElementById('danceGif');//跳舞的gif图

        var select_music = document.getElementById("select_music");//找到音乐的下拉列表
        var select_speed = document.getElementById("select_speed");//找到音乐的下拉列表
        var select_arrowCount = document.getElementById("select_arrowCount");//找到音乐的下拉列表
        var repeat; // 用来记录是否音乐结束
        /*音乐结束*/
        music.onended = function () {
            //停止start的定时
            clearInterval(repeat);
        }
        /*定义数组将所有歌曲存储*/
        var musicArr =["./audio/music.mp3","./audio/威尼斯迷路.mp3","./audio/劲舞团-金贤政-七年的爱.mp3","./audio/anyclub.mp3",];
        /*找到音乐的下拉列表将数据添加进去*/
        for(var i = 0;i < musicArr.length; i++){
            select_music.innerHTML+="<option value='"+i+"'>"+musicArr[i].split("/")[2]+"</option>"
        }
        /* 给下拉列表设置内容改变事件 */
        select_music.onchange =function (ev) {
            music.src = musicArr[this.value];
        }
        //给速度设置内容改变事件
        select_speed.onchange = function (ev) {
            time = parseInt(this.value)*1000;
        }
        //给arrowCount 设置内容改变事件
        select_arrowCount.onchange = function (ev) {
            arrowCount = parseInt(this.value);
            loadArrow();
        }

        /*存入所有图片的列表：按照左上右下，红色，绿色顺序存放*/
        var pics = ["img/left_off.bmp", "img/up_off.bmp", "img/right_off.bmp", "img/down_off.bmp",
            "img/left_on.bmp", "img/up_on.bmp", "img/right_on.bmp", "img/down_on.bmp"];

        var randomArrowIndex = new Array();//随机箭头索引数组
        var animateTime;
        var index = 0;//代表用户按到第几个了
        // 需求：
        // 1. 随即出现箭头，随即11个 左上右下  箭头
        function start() {//开始方法：让界面显示11个箭头
            if(isFinish ==false){
                miss.play();
                danceGif.src = "img/miss.jpg"
            }
            //调用进度条动画
            progressAnimate()
            isFinish = false;
            //开始随机箭头
            initRondomArrows();
        }

        //2. 开始按键，
        startBut.onclick = function (ev) {
            //播放音乐
            music.play();
            //让按钮和选择的东西都消失
            dispareOther();
            //判断arrows有没有初始化, 如果没有初始化, 证明用户没有选择键的个数, 采用默认方式初始化键的数量
            if(arrows == undefined){
                loadArrow();
            }
            //开始游戏
            repeat =  setInterval(start,time);
            // 2. 给窗口绑定键盘按下的事件
            window.onkeydown = function (e) {
                //去掉箭头默认的页面效果
                e.preventDefault();
                //判断本轮是否已经完成,已经完成,不响应,只有没有完成才响应
                if (!isFinish) {
                    // 左上右下键
                    // console.log(e.keyCode);
                    // 左上右下  ---- 37 38 39 40
                    // 如果按对，将红色箭头变为绿色箭头。
                    // 需要获取到 随即的11个箭头索引（0-3）
                    if (randomArrowIndex[index] == e.keyCode - 37) {
                        msg.innerHTML = '';
                        // console.log("按对了");
                        //箭头变绿 +4的操作，是为了取出当前红色箭头对应的绿色箭头
                        arrows[index].src = pics[randomArrowIndex[index] + 4];
                        //   如果全部按对，perfect音效和文字提示
                        index++;
                        if (index == arrowCount) {
                            success();//成功了
                        }
                    } else {// 如果按错，miss音效和文字提示
                        fail(); //失败了
                    }
                }
            }
        }
        /*失败干的事情*/
        function  fail() {
            miss.play();
            msg.innerHTML = 'Miss!!!!';
            motion.src="img/failure.gif"
            //重新加载一遍箭头
            for (var i = 0; i < arrowCount; i++) {
                arrows[i].src = pics[randomArrowIndex[i]];
            }
            index = 0;
        }
        /* 成功的干的事情 */
        function success() {

            perfect.play();
            msg.innerHTML = 'Perfect!!!!';
            motion.src="img/success.gif"
            isFinish = true;
            addScore();
            //danceGif.style.display="block";
            var indexGif = Math.floor(Math.random()*9);
            danceGif.src = "gif/"+indexGif+".gif";
        }

        /* 开始随机箭头 */
        function initRondomArrows() {
            // 1.1 随即arrowCount个0-3索引，然后给arrowCount个img标签，添加随即索引对应的图片路径
            for (var i = 0; i < arrowCount; i++) {
                var randomIndex = Math.floor(Math.random() * 4);
                randomArrowIndex[i] = randomIndex;
                arrows[i].src = pics[randomIndex];
            }
            // console.log(randomArrowIndex);
            // 重新开始
            index = 0;
            msg.innerHTML = "";
        }

        /* 进度条动画 */
        function progressAnimate() {
            hr1.width = "0px";
            /* 判断animateTime有没有,在开始新动画之前去除老的动画 */
            if(!isNaN(animateTime)){
                clearInterval(animateTime);
            }
            /* 进度条的动画 */
            animateTime = setInterval(function(){
                hr1.width= parseInt(hr1.width)+document.body.clientWidth /100 ;
                if(parseInt(hr1.width)>=parseInt(document.body.clientWidth)){
                    /* 等进度条已经铺满, 去掉动画 */
                    clearInterval(animateTime);
                }
            }, time /100);
        }
        function loadArrow() {
            for (var i = 0; i < arrowCount; i++) {
                var img = document.createElement('img');
                img.className = "arrowImg";
                keys.appendChild(img);
            }
            keys+='<hr align="left" id="hr1" width="0px" color="red" >'
            arrows = document.getElementsByClassName("arrowImg");
        }


        /* 开始游戏时让其他不想关的都消失 */
        function dispareOther() {
            startBut.style.display = 'none';
            select_music.style.display = 'none';
            select_speed.style.display="none";
            select_arrowCount.style.display="none";
        }



        /*  加分的动画代码  */
        function addScore() {
            var result = total;
            var total_span = document.getElementById("total");
            total_span.style.fontSize = "20px"

            var time = setInterval(function () {
                total += 1;
                total_span.innerHTML = total;
                if ((total - result) >= 100) {
                    clearInterval(time);
                    total_span.style.fontSize = "10px"
                }
            }, 20);
        }

    }
</script>


<body>
<!-- perfect音效 -->
<audio src="./audio/effect_p3.wav" style="width: 0px; height: 0px;" id="perfect"></audio>
<!-- miss音效 -->
<audio src="./audio/effect_m.wav" style="width: 0px; height: 0px;" id="miss"></audio>
<!-- embed可以自动播放 -->
<!--<embed src="audio/music.mp3"  style="width: 0px; height: 0px;" id="music"></embed>-->
<audio src="./audio/music.mp3" style="width: 0px; height: 0px;"  id="music"></audio>

<button id="but1">开始</button>

<div style="height: 450px">
    <!-- 游戏的歌曲的选择框 -->
    <select id="select_music">
    </select>
    <!-- 游戏速度的选择框 -->
    <select id="select_speed">
        <option value="1">1秒</option>
        <option value="2">2秒</option>
        <option value="3">3秒</option>
        <option value="4">4秒</option>
        <option value="5">5秒</option>
    </select>
    <!-- 游戏箭头的个数的选择框 -->
    <select id="select_arrowCount">
        <option value="7">7个键</option>
        <option value="9">9个键</option>
        <option value="11">11个键</option>
        <option value="15">15个键</option>
        <option value="18">18个键</option>
    </select><br>
    <img id="danceGif" style="margin: 0 auto; width: 100%;height: 730px;" src="img/person.jpg">
</div>
<div>
    <!-- keys就是存放随即出来的方向按键的   center是居中显示的标签-->
    <center id="keys">
        <hr align="left" size="10px" id="hr1" width="0px" color="red" style="position: relative;left: 0;"  >
    </center>
</div>
<!-- 清除上面的浮动的 -->
<div style="clear: both"></div>

<div>总分:<span id="total" style="font-size: 10px">0</span></div>
<!-- 用于提示表情的 -->
<div><img src="" id="motion" style="width: 100px;height: 100px;" alt=""  >   </div>
<!-- 用于提示miss，或者perfect -->
<span id="msg"  style="color:red;"></span>
</body>
</html>


